<template>
  <div>
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item
        ><a @click="$router.push('/home')">主页</a></a-breadcrumb-item
      >
      <a-breadcrumb-item>项目介绍</a-breadcrumb-item>
      <a-breadcrumb-item>毕设介绍</a-breadcrumb-item>
    </a-breadcrumb>

    <a-row>
      <a-col :span="12" :order="4">
        <div>
          <span
            >段落示意：各个页面具体功能和使用方式，并实时更新功能和页面。</span
          >
          <a-row class="tip" type="flex" justify="start">
            <a-col :span="5">
              <a-space  @click="unlogin"
                ><a-icon type="thunderbolt"/> <span>快速开始</span>
              </a-space>
            </a-col>
            <a-col :span="5">
              <a-space @click="jumpVue"
                ><a-icon type="exclamation-circle" /> <span>主要技术</span>
              </a-space>
            </a-col>
            <a-col :span="5">
              <a-space @click="jumpantd"
                ><a-icon type="snippets" /> <span>产品文档</span>
              </a-space>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <div class="card-list">
      <a-list
        :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
        :dataSource="dataSource"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <template v-if="item.add">
            <a-button class="new-btn" type="dashed">
              <a-icon type="plus" />新增产品
            </a-button>
          </template>
          <template v-else>
            <a-card :hoverable="true">
              <a-card-meta>
                <div style="margin-bottom: 3px" slot="title">
                  {{ item.title }}
                </div>
                <a-avatar
                  class="card-avatar"
                  slot="avatar"
                  :src="item.avatar"
                  size="large"
                />
                <div class="meta-content" slot="description">
                  {{ item.content }}
                </div>
              </a-card-meta>
              <a slot="actions">修改</a>
              <a slot="actions">删除</a>
            </a-card>
          </template>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: "top",
      desc: "段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， 提供跨越设计与开发的体验解决方案。",
      linkList: [
        { icon: "rocket", href: "/#/", title: "快速开始" },
        { icon: "info-circle-o", href: "/#/", title: "产品简介" },
        { icon: "file-text", href: "/#/", title: "产品文档" },
      ],
      extraImage:
        "https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png",
      dataSource: [
        {
          title: "用户管理",
          avatar:
            "https://img1.baidu.com/it/u=805433598,193080427&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          content:
            "添加用户：弹出添加用户对话框，需要填写用户名、密码、邮箱、手机号来添加用户，并且跟登录一样，也会进行验证处理以及预处理;编辑用户：用户可以重新修改邮箱及手机号，同时含有验证处理以及预处理功能;删除用户：确认后将永久删除该用户;搜索用户：输入想查询用户的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能;分配角色：弹出要分配角色的用户的分配角色对话框，可在三级选择器选择想分配的新角色;更改用户状态：可更改用户是否可登录状态",
        },
        {
          title: "权限管理",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F07%2F85%2F23%2F5931663d9d062.png&refer=http%3A%2F%2Fpic.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646280634&t=8a57937e42f1fd1e5353208a8c148aac",
          content:
            "添加角色：弹出添加角色对话框，需要填写角色名称、角色描述来添加角色，同时含有验证处理以及预处理功能;编辑角色：用户可以重新修改角色名称、角色描述，同时含有验证处理以及预处理功能;删除角色：确认后将永久删除该角色",
        },
         {
          title: "商品管理",
          avatar:
            "https://img2.baidu.com/it/u=1522544436,970466281&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          content:
            "添加商品：点击添加商品，将编程式跳转至添加商品页面需要完成商品基本信息、商品参数、商品属性、商品图片、商品内容的填写方可成功添加商品;编辑商品：用户可以重新修改商品名称、商品价格及数量，同时含有验证处理以及预处理功能",
        },
        {
          title: "订单管理",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F0u%2Fou%2F6q.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646280839&t=3895dd0d668c8e9a8c497671f6159496",
          content:
            "搜索订单：输入想查询订单的相关信息，点击搜索按钮后便可显示查询的信息，含有一键清空功能;编辑订单：可以重新修改订单的地址",
        },
         {
          title: "数据统计",
          avatar:
            "https://img2.baidu.com/it/u=3123314236,2480071960&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
          content:
            "数据报表：通过折线图显示每一天的用户来源",
        },
      ],
    };
  },
  methods: {
    callback(val) {
      console.log(val);
    },
    unlogin() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    jumpVue(){
      window.location.href = 'https://cn.vuejs.org/index.html'; 
    },
     jumpantd(){
      window.location.href = 'https://www.antdv.com/docs/vue/introduce-cn/'; 
    }
  },
};
</script>

<style lang="less" scoped>
.breadcrumb {
  padding: 0px 0px 15px 0px;
}
.card-list{
  margin-top: 20px;
}
.tip {
  margin-top: 20px;
  font-size: 15px;
  color: #48d1cc;
}
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 187px;
}
.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 64px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>